<template>
  <m-page>
    <!-- 借还记录列表页 -->
    <m-header title="借还记录"></m-header>
    <div class="borrowed_record">
      <ynet-button-tab :items="items" @change="handleChange"></ynet-button-tab>
      <!-- 借款记录 -->
      <div v-if="isFlag === 1">
        <div class="g-list" v-for="item in list" :key="item.id">
          <div class="g-top">
            <span class="u-left">借据号：{{item.number}}</span>
            <span class="u-right">{{item.money}}</span>
          </div>
          <div class="g-bottom">
            <span class="u-left">{{item.day}}</span>
            <span class="u-right gray" v-if="item.status=='已结清'">{{item.status}}</span>
            <span class="u-right red" v-if="item.status=='已逾期'">{{item.status}}</span>
            <span class="u-right green" v-if="item.status=='使用中'">{{item.status}}</span>
            <span class="u-right blue" v-if="item.status=='未放款'">{{item.status}}</span>
          </div>
        </div>
      </div>
      <!-- 还款记录 -->
      <div class="g-list1" v-if="isFlag===2">
        <div class="g-box"></div>
        <div class="g-txt">
          <p>尊敬的用户，您还未申请该业务，先去申请吧！</p>
        </div>
        <div class="g-btn">
          <ynet-button type="warning plain">前往申请</ynet-button>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import ynetButtonTab from "@components/button-tab/index";
import ynetButton from "@components/button/index";
export default {
  components: {
    ynetButtonTab,
    ynetButton
  },
  data() {
    return {
      isFlag: 1,
      items: [
        { text: "借款记录", id: 1 },
        { text: "还款记录", id: 2 }
      ],
      list: [
        {
          id: 1,
          number: 123456,
          money: -30000,
          day: "2019-10-10",
          status: "已结清"
        },
        {
          id: 2,
          number: 123456,
          money: -30000,
          day: "2019-10-11",
          status: "未放款"
        },
        {
          id: 3,
          number: 123456,
          money: -30000,
          day: "2019-10-12",
          status: "已逾期"
        },
        {
          id: 4,
          number: 123456,
          money: -30000,
          day: "2019-10-13",
          status: "使用中"
        }
      ]
    };
  },
  methods: {
    handleChange(item) {
      this.isFlag = item.id;
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

